<template>
	<div class="quality">
		<div class="tableBox">
			<el-form ref="form" label-position="left" :model="form" label-width="40%">
				<el-form-item label="第1,2排出 GP(枚)"><div><el-input v-model="form.num1" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="第3排出(KG)/折合数(枚)"><div><el-input v-model="form.num2" placeholder="请输入第3排出质量" style="width:50%"></el-input>/<el-input v-model="form.num3" placeholder="请输入枚数" style="width:46%"></el-input></div></el-form-item>
				<el-form-item label="QA,QC抽样(枚)"><div><el-input v-model="form.num4" placeholder="请输入枚数"></el-input></div></el-form-item>
				<el-form-item label="第3排出、QA,QC抽样(枚)"><div><el-input v-model="form.num5" placeholder="请输入枚数"></el-input></div></el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<el-table :data="tableData">
				<el-table-column type="index" label="序号" align="center" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="project" label="项目" align="center" width="200" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="quality1" label="质量1" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.quality1" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="quality2" label="质量2" align="center" min-width="200">
					<template slot-scope="scope">
						<div v-if="scope.row.quality2"><el-input v-model="scope.row.quality3" placeholder="请输入"></el-input></div>
						<div v-else></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					num1: '',
					num2: '',
					num3: '',
					num4: '',
					num5: '',
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				tableData: [
					{
						id: '1',
						project: '开机损耗',
						quality1: '',
						quality2: false,
						quality3:''
					},
					{
						id: '2',
						project: '工程检查',
						quality1: '',
						quality2: false,
						quality3:''
					},
					{
						id: '3',
						project: '产品齿入 个装热封',
						quality1: '',
						quality2: false,
						quality3:''
					},
					{
						id: '4',
						project: '剥离纸蛇形',
						quality1: '',
						quality2: false,
						quality3:''
					},
					{
						id: '5',
						project: '两侧NW折叠不良',
						quality1: '',
						quality2: false,
						quality3:''
					},
					{
						id: '6',
						project: '互译背胶错位',
						quality1: '',
						quality2: true,
						quality3:''
					},
					{
						id: '7',
						project: '200枚抽检损耗',
						quality1: '',
						quality2: true,
						quality3:''
					},
					{
						id: '8',
						project: 'QA抽样',
						quality1: '',
						quality2: true,
						quality3:''
					},
					{
						id: '9',
						project: 'QC抽样',
						quality1: '',
						quality2: true,
						quality3:''
					}
				],
			};
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
		}
	}
</script>

<style scoped>
.quality{
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px 30px;
	height:auto;
}
.quality >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:5px;
}
.quality >>> .el-form-item__label{
	font-size:24px;
	color:#000;
	line-height: 60px;
}
.quality >>> .el-form-item__content{
	font-size:24px;
	color:#666666;
}
.quality >>> .el-input > input{
	background:#fff;
	font-size:24px;
}
</style>
